<template>
    <div class="vueHeader">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-time"></i>CL's Zone</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <router-link to="/home">首页</router-link>
                        </li>
                        <li>
                            <router-link to="/time-entries">计划列表</router-link>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">分类导航<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <router-link to="/home">all</router-link>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <router-link to="/detail">js</router-link>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <router-link to="/detail">css</router-link>
                                </li>
                            </ul>
                        </li>
                    </ul>
    
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <router-link to="/home"><span class="glyphicon glyphicon-user"></span> 注册</router-link>
                        </li>
                        <li>
                            <router-link to="/home"><span class="glyphicon glyphicon-log-in"></span> 登录</router-link>
                        </li>
                    </ul>
    
                </div>
            </div>
        </nav>
    
        <section id="blog" style="margin-top: 50px; margin-bottom: 50px; height: 700px; background-size: 100% 100%" v-bind:style="{backgroundImage: 'url(' + bgImg + ')'}" >
            <div class="titleBlock">
                <p>欢迎来到</p>
                <router-link to="/home" tag="h1">诺特勒斯港湾</router-link>
                <p>我们不搬运代码，我们只是计算机的造轮工。</p>
            </div>
        </section>
    
    </div>
</template>

<script>
export default {
    data() {
        return {
            bgImg: require('@/assets/img/header-bg.jpg')
        }
    },



    methods: {
        onclickMe: function () {

        }
    }
}
</script>

<style>
    .titleBlock {
        text-align: center;
        position: relative;
        width: 800px;
        height: 300px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 5px solid white;
        border-radius: 10%;
        line-height: 100px;
        font-size: 25px;
    }
</style>

